<template>
  <div>
    <a-form
      :label-width="120"
      label-placement="left"
      :model="formData"
      ref="formRef"
    >
      <a-form-item label="服务" path="serve">
        <a-select
          filterable
          placeholder="选择服务"
          :options="serveOption"
          v-model:value="formData.serve"
          @update:value="serveChange"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="大类" path="class">
        <a-select
          placeholder="选择大类"
          @update:value="classChange"
          :options="classOptions"
          v-model:value="formData.class"
        >
        </a-select>
      </a-form-item>
      <div ref="xxx" v-for="item in filterList" :key="item.api">
        <p>{{ item }}</p>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import http from "@/utils/http";

const serveOption = ref([]);
const classOptions = ref([]);
const renderList = ref([]); // 全部接口
const filterList = ref([]); // 筛选过后的接口
let hasMap: any = null;

const formData = reactive({
  swwagerUrl: "http://parkjxapidev.hnztrx.com/swagger-resources",
  serve: "",
  class: "",
});

http.get(formData.swwagerUrl).then((res) => {
  console.log(res);
  serveOption.value = res.map((v) => ({ label: v.name, value: v.name }));
});

function serveChange(val) {
  console.log(val, "serve Val");
  http
    .get("http://parkjxapidev.hnztrx.com/v2/api-docs?group=知识库")
    .then((res) => {
      console.log(res, "res val");
      const { paths, definitions } = res;
      hasMap = Object.keys(paths).reduce((map, key) => {
        const item = paths[key];
        const itemKeys = Object.keys(item);
        const itemKey = itemKeys[0];
        const tag = item[itemKey].tags[0];
        const definitionsKey =
          item[itemKey]?.parameters &&
          item[itemKey]?.parameters[0]?.schema?.originalRef;
        map.set(tag, [
          ...(map.get(tag) || []),
          {
            ...item[itemKey],
            type: itemKey,
            api: key,
            fixed: definitions[definitionsKey] || null,
          },
        ]);
        return map;
      }, new Map());
      classOptions.value = [...hasMap.keys()].map((v) => ({
        label: v,
        value: v,
      }));
    });
}

function classChange(val) {
  const interList = hasMap.get(val);
  const httpStatusMap = new Map();
  const getStatus = (str) =>
    str.includes("分页查询") ||
    str.includes("查询分页") ||
    str.includes("分页");
  const addStatus = (str) => str.includes("添加") || str.includes("新增");
  const editStatus = (str) =>
    str.includes("保存") || str.includes("编辑") || str.includes("修改");
  const delStatus = (str) => str.includes("删除");
  const httpStatusList = [
    { get: getStatus },
    { add: addStatus },
    { edit: editStatus },
    { del: delStatus },
  ];
  httpStatusList.forEach((v) => {
    const key = Object.keys(v)[0];
    const validateFn = v[key];
    const result = interList.find((s) => validateFn(s.summary));
    httpStatusMap.set(key, result || {});
  });
  filterList.value = Array.from(httpStatusMap.values());
  renderList.value = interList;
}
</script>

<style lang="less" scoped></style>
